@text-color-theme-dark: #FCFCFD;
@text-color-theme-light: #A6ACB9;
@block-backgroud-color-theme-dark: rgba(28,29,34,0.4);
@block-backgroud-color-theme-light: #F4F4F6;

.chat-controls {
  display: flex;
  width: 100%;
  color: @text-color-theme-dark;

  :global {
    .chat-input-form {
      flex-grow: 1;
    }
    
    .chat-input {
      color: @text-color-theme-dark;
      background-color: @block-backgroud-color-theme-dark;
      border: none;
      outline: none;
      border-radius: 0.5rem;
      width: 100%;
      height: 0.72rem;
      padding: 0 0.24rem;
      font-size: 0.28rem;
      
      &::-webkit-input-placeholder {
        color: @text-color-theme-dark;
        font-size: 0.28rem;
      }
    }

    .chat-btn-wrap {
      position: relative;
      box-sizing: content-box;
      margin-left: 0.24rem;
    }
    
    .chat-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.72rem;
      height: 0.72rem;
      font-size: 0.52rem;
      text-align: center;
      background-color: @block-backgroud-color-theme-dark;
      border-radius: 50%;
      cursor: pointer;
    
      .active {
        color: #E91E63;
      }
    }
    
    .like-anime-container {
      position: absolute;
      bottom: 80%;
      width: 120%;
      height: 2rem;
      left: -10%;
      pointer-events: none;
    }
  }
}

.chat-controls-light {
  color: @text-color-theme-light;

  :global {
    .chat-input {
      color: @text-color-theme-light;
      background-color: @block-backgroud-color-theme-light;
      
      &::-webkit-input-placeholder {
        color: @text-color-theme-light;
      }
    }
    
    .chat-btn {
      background-color: @block-backgroud-color-theme-light;
    }
  }
}
